<template>
  <div ref="personal" id="personal">
    <div class="b4" ref="personalChild">
      <div class="b4_d1">
        <div class="first">
          <img src="@/assets/p.jpg" />
        </div>
        <span>苏州</span>
        <div class="second" @mouseout="cout()" @mouseover="cin()">
          <span>详情</span>
        </div>
        <div id="change">
          &nabla;苏州，简称“苏”，古称姑苏、平江，是江苏省辖地级市，国务院批复确定的长江三角洲重要的中心城市之一、国家高新技术产业基地和风景旅游城市，截至全2020年底，苏州市下辖5个区、代管4个县级市，总面积8657.32平方千米，建成区面积477.63平方千米，常住人口为1274.8262万人；2021年实现地区生产总值22718.3亿元。
        </div>
      </div>
      <div class="b4_d2">
        <div class="first">
          <span style="font-size:40px">长三角</span>
        </div>
        <div class="second">
          <span
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长三角地区是现代中国发展历史最为悠久、发展程度最高的经济区，也是中国经济发展的重要引擎。</span
          >
        </div>
        <div class="third">
          <img src="@/assets/R.jpg" />
        </div>
        <span style="margin-top:20px">长三角地区</span>
      </div>
      <div class="b4_d3">
        <div class="first">
          <img src="@/assets/bz.jpg" />
        </div>
        <span>上海</span>
        <div class="second" @mouseout="cout2()" @mouseover="cin2()">
          <span>详情</span>
        </div>
        <div id="change2">
          &nabla;上海，简称“沪”或“申”，是中华人民共和国省级行政区、直辖市、国家中心城市、超大城市、上海大都市圈核心城市，国务院批复确定的中国国际经济、金融、贸易、航运、科技创新中心。截至2019年，全市下辖16个区，总面积6340.5平方千米，建成区面积1237.85平方千米。2020年11月1日零时，常住人口2487.09万人。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Personal",
  methods: {
    cout() {
      let a3 = document.getElementById("change");
      a3.style.display = "none";
    },
    cout2() {
      let a31 = document.getElementById("change2");
      a31.style.display = "none";
    },
    cin() {
      let a2 = document.getElementById("change");
      a2.style.display = "block";
    },
    cin2() {
      let a21 = document.getElementById("change2");
      a21.style.display = "block";
    },
    getHeigth() {
      this.$refs.personal.style.height = window.getComputedStyle(
        this.$refs.personalChild
      ).height;
    },
  },
  mounted() {
        this.getHeigth()
    },
};
</script>

<style scoped>

.b4 {
  height: 46rem;
  position: relative;
  
  
}

.b4 > .b4_d1 {
  text-align: center;
  margin-left: 15.5%;
  height: 100%;
  width: 23%;
  padding: 1rem;
  float: left;
}

.b4 > .b4_d1 > .first {
  width: 100%;
  height: 50%;
}
.b4 > .b4_d1 > .first img {
  width: 100%;
  height: 100%;
}

.b4 > .b4_d1 > .first img:hover {
  transform: scale(1.05);
  box-shadow: 2px 6px 19px #818163;
  transition: all 0.7s;
  cursor: pointer：0.7;
}
.b4 > .b4_d1 > #change {
  font-size: 20px;
  line-height: 30px;
  display: none;
  text-indent: 2em;
  background-color: rgb(95, 96, 98);
  padding: 18px;
  border-radius: 25px;
  margin-top: 10px;
  color: rgb(215, 214, 210);
}
.b4 > .b4_d1 span {
  font-size: 30px;
  line-height: 80px;
  display: block;
}
.b4 > .b4_d1 span ul li {
  font-size: 15px;
  line-height: 20px;
  text-align: left;
}

.b4 > .b4_d1 > .second {
  background-color: black;
  width: 24%;
  margin-left: 38%;
}

.b4 > .b4_d1 > .second:hover {
  background-color: peru;
  width: 24%;
  /* margin-left: 38%; */
  cursor: pointer;
}

.b4 > .b4_d1 > .second span {
  font-size: 25px;
  color: white;
  line-height: 50px;
}

.b4 > .b4_d2 {
  text-align: center;
  height: 100%;
  width: 23%;
  float: left;
  padding: 1rem;
}
.b4 > .b4_d2 > .first {

  width: 100%;
  height: 20%;
}
.b4 > .b4_d2 > .first span {
  font-family: "Agency FB";
  font-size: 80px;
}

.b4 > .b4_d2 > .second {
  width: 100%;
  text-align: left;
  /* height: 16%; */
}

.b4 > .b4_d2 > .second span {
  font-size: 20px;
  font-family: 微软雅黑;
}

.b4 > .b4_d2 > .third {
  width: 100%;
  height: 50%;
}
.b4 > .b4_d2 > .third img {
  width: 100%;
  height: 100%;
}

.b4 > .b4_d2 > .third img:hover {
  transform: scale(1.01);
  box-shadow: 2px 6px 19px #818163;
  transition: all 0.7s;
  cursor: pointer;
  opacity: 0.8;
}

.b4 > .b4_d2 span {
  font-size: 30px;
}

.b4 > .b4_d2 > .forth {
  background-color: black;
  width: 24%;
  margin-left: 38%;
  margin-top: 4%;
}

.b4 > .b4_d2 > .forth:hover {
  background-color: peru;
  width: 24%;
  margin-left: 38%;
  cursor: pointer;
}

.b4 > .b4_d2 > .forth span {
  font-size: 25px;
  color: white;
  line-height: 50px;
}

.b4 > .b4_d3 {
  text-align: center;
  height: 100%;
  width: 23%;
  float: left;
  padding: 1rem;
}
.b4 > .b4_d3 > .first {
  width: 100%;
  height: 50%;
}
.b4 > .b4_d3 > .first img {
  width: 100%;
  height: 100%;
}
.b4 > .b4_d3 > .first img:hover {
  transform: scale(1.05);
  box-shadow: 2px 6px 19px #818163;
  transition: all 0.7s;
  cursor: pointer;
}
.b4 > .b4_d3 > #change2 {
  font-size: 20px;
  line-height: 30px;
  display: none;
  text-indent: 2em;
  background-color: rgb(95, 96, 98);
  padding: 18px;
  border-radius: 25px;
  margin-top: 10px;
  color: rgb(215, 214, 210);
}
.b4 > .b4_d3 span {
  font-size: 30px;
  line-height: 80px;
}

.b4 > .b4_d3 > .second {
  background-color: black;
  width: 24%;
  margin-left: 38%;
}

.b4 > .b4_d3 > .second:hover {
  background-color: peru;
  cursor: pointer;
}

.b4 > .b4_d3 > .second span {
  font-size: 25px;
  color: white;
  line-height: 50px;
}
</style>